<template>
  <div>
    <div class="user_info" @click="goMyInfo">
      <img class="avatar" src="/web-hft-ee/static/img/common_profile.png" v-real-img="this.$store.getters.userAvatar"/>
      <p class="nickname ellipsis1">{{this.$store.getters.userNickname.replace('hft_','')}}</p>
      <p class="tips" v-show="isShow">编辑信息</p>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'user-info-m',
    methods: {
      goMyInfo () {
        if (!this.$store.getters.canEnterMyInfo) return
        this.$_router.push('/myinfo')
      }
    },
    computed: {
      isShow () {
        return this.$store.getters.canEnterMyInfo
      }
    },
  }
</script>
<style scoped>
  .user_info {
    background-color: white;
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    padding-bottom: 16px;
  }

  .avatar {
    height: 56px;
    width: 56px;
    margin: 0 auto;
    border-radius: 100%;
    object-fit: cover;
  }

  .nickname {
    margin: 8px auto 0;
    width: auto;
    max-width: 300px;
    font-size: 18px;
    color: #333333;
  }

  .msg {
    position: absolute;
    right: 0;
    top: 0;
    padding: 16px;
  }

  .tips {
    margin: 0 auto;
    width: auto;

    font-size: 14px;
    color: #1DA1F2;
  }
</style>
